<template>
    <div>
        <cvue-dialog
            :dialogVisible="adminerVisible"
            title="添加楼管"
          
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody" >
                <div class="left-con the-con">
                    <el-tree
                        :props="{
                            children: 'childrenSchoolDept',
                            label: 'schooldept'
                        }"
                        :data="deptTree"
                        :default-expand-all="true"
                        :expand-on-click-node="false"
                        :highlight-current="true"
                        @node-click='nodeClick'
                        >
                       <span slot-scope="{data, node}">
                           {{data.schooldept.name}}
                       </span>
                    </el-tree>
                </div>
                <div class="right-con " >
                     <el-table
                        ref="teacherTable"
                        :data="teacherList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        height="500"
                        @selection-change="selectionChange"
                        @row-click="rowClick"
                        >
                        <el-table-column
                        type="selection"
                        width="55">
                        </el-table-column>
                        <el-table-column
                        label="姓名"
                        prop="name"
                        width="120">
                     
                        </el-table-column>
                        <el-table-column
                      
                        label="部门"
                        width="120">

                        <span slot-scope="{data}" >
                           
                            <span v-if="dept">{{dept.schooldept.name}}</span>
                           <span v-else>{{deptTree[0].schooldept.name}}</span>
                        </span>
                        </el-table-column>
                        
                    </el-table>
                
                    <!-- <el-pagination  v-show="total > 0"
                    style="margin:20px 0 0 0;"
                    background
                    layout="prev, pager, next"
                    :page-size='PageSize'
                    :current-page='PageNum'
                    :total="total"
                  >
                    </el-pagination> -->
                     
                </div>
                <div class="clear">
                    
                </div>
        
            </div>
        </cvue-dialog>

    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
export default {
    components: {
        cvueDialog
    },
    computed: {
        adminerVisible () {
            return this.$store.state.dorm.adminerVisible
        },
        
        curDorm () {
          return this.$store.state.dorm.curDorm
        },
       
        schoolId () {
          return this.$store.state.common.cookiesObj.schoolId
        },
        schoolName () {
          return this.$store.state.common.cookiesObj.schoolName
        },
        deptTree () {
            return this.$store.state.dorm.deptTree
        },
        teacherList () {
            return this.$store.state.dorm.teacherList
        }
    },
    data () {
        return {
            dept: '',
            selectedList: []
        }
    },
    methods: {
       
        openDialog () {
        //    this.$store.dispatch('dorm/getDept', {
        //        schoolId: this.schoolId
        //    })
           
           this.$store.dispatch('dorm/schoolDeptModelList', this.schoolId)
        },
        confirmDialog () {
            //  this.closeDialog()
            if (this.selectedList.length == 0) {
                this.$message.error('请选择人员')
                return
            }
            var params = {
                admins: this.selectedList.map(obj => {
                    return {
                        id: obj.id,
                        name: obj.name
                    }
                }),
                schoolId: this.schoolId,
                updateType: 1,
                id: this.curDorm.id
            }
           
            this.$store.dispatch('dorm/editDorm', params).then(res => {
                this.$message.success('添加成功')
                this.closeDialog()
            })
        },
        closeDialog () {
            this.$store.state.dorm.adminerVisible = false
        },
        nodeClick (data, node) {
            console.log(data)
            this.dept = data
            this.$store.dispatch('dorm/teacherListByDept', data.schooldept.id)
        },
        selectionChange (val) {
            console.log(val)
          this.selectedList = val
        },
       
        rowClick (row, column) {
          this.$refs.teacherTable.toggleRowSelection(row)
        }
    }
}
</script>
<style scoped>
.left-con{float: left;width: 30%;}
.right-con{float: left;width: 65%;border-left: 1px solid #efefef;padding: 0 0 0 10px;}
.clear{clear: both;}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .the-con{max-height:500px; overflow:scroll;}
</style>
